import React from 'react';
import './index.css'
import { Route, Link, Switch } from 'react-router-dom'
import { Layout, Menu, Dropdown } from 'antd';
import {
  DashboardOutlined,
  UnorderedListOutlined,
  AppstoreOutlined,
  SketchOutlined,
  PieChartOutlined,
  TeamOutlined
} from '@ant-design/icons';
import http from '../../http'
import Home from '../home'
import Shop from '../shop/index'
import Classify from '../classify/index'
import SecondCfy from '../classify/secondCfy'
import Order from '../order/index'
import OrderDetail from '../order/detail'
import User from '../user'
import Detail from '../shop/detail'
import Editor from '../shop/editor'
import AddShop from '../shop/add'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      userMsg: {}
    }
  }
  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  loginOut = () => {
    http.post('/api/user/logout.do').then(res => {
      this.props.history.push('/')
    })
  }
  componentDidMount(){
    this.setState({
      userMsg: JSON.parse(localStorage.getItem('user')) 
    })
    // console.log(this.state.userMsg)
  }
  render() {
    const menu = (
      <Menu>
        <Menu.Item onClick={this.loginOut}>退出登录</Menu.Item>
      </Menu>
    );
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <SubMenu
              key="sub1"
              title={
                <span>
                  <DashboardOutlined />
                  <span>仪表盘</span>
                </span>
              }
            >
              <Menu.Item key="1">
                <UnorderedListOutlined />
                <Link to='/main/home'>首页</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={
                <span>
                  <AppstoreOutlined />
                  <span>商品</span>
                </span>
              }
            >
              <Menu.Item key="2">
                <UnorderedListOutlined />
                <Link to='/main/shop'>商品管理</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub3"
              title={
                <span>
                  <SketchOutlined />
                  <span>品类</span>
                </span>
              }
            >
              <Menu.Item key="3">
                <UnorderedListOutlined />
                <Link to='/main/classify'>品类管理</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub4"
              title={
                <span>
                  <PieChartOutlined />
                  <span>订单</span>
                </span>
              }
            >
              <Menu.Item key="4">
                <UnorderedListOutlined />
                <Link to='/main/order'>订单管理</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub5"
              title={
                <span>
                  <TeamOutlined />
                  <span>用户</span>
                </span>
              }
            >
              <Menu.Item key="5">
                <UnorderedListOutlined />
                <Link to='/main/user'>用户管理</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ 'box-shadow': 'rgba(0, 21, 41, 0.08) 0px 1px 4px' }}>
            <div className='main-layout'>
              <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                  {this.state.userMsg.username} 
                </a>
              </Dropdown>
            </div>
          </Header>
          <Content>
            <Switch>
              <Route path='/main/home' component={Home}></Route>
              <Route path='/main/shop' component={Shop}></Route>
              <Route path='/main/add' component={AddShop}></Route>
              <Route path='/main/detail/:id' component={Detail}></Route>
              <Route path='/main/editor/:id' component={Editor}></Route>
              <Route path='/main/classify' component={Classify}></Route>
              <Route path='/main/secondify/:id' component={SecondCfy}></Route>
              <Route path='/main/order' component={Order}></Route>
              <Route path='/main/orderdetail/:id' component={OrderDetail}></Route>
              <Route path='/main/user' component={User}></Route>
            </Switch>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Copyright © 2020 1811最棒</Footer>
        </Layout>
      </Layout>
    );
  }
}
 
export default Main;